<template>
  <text
      class="overflow-hidden color-danger-6"
      :class="{ 'font-700': bold }"
      :style="{
        color: color,
        ...customStyle
      }"
  >
  <text v-if="showUnitIcon"
        class="mr-[-4rpx]"
        :style="{
        'font-size': moneyUnitSize,
        'line-height': moneySize,
      }"
    >￥
    </text
    >
    <text
        :class="{
        'number-font': showNumberFont,
      }"
        :style="{
        'font-size': moneySize,
        'line-height': moneySize,
      }"
    >
      {{ money ? getMoneyCentYuan(money) : 0 }}
    </text>
    <text v-if="showUnit"
        class="ml-[4rpx]"
        :style="{
        'font-size': moneyUnitSize,
        'line-height': moneySize,
      }"
    >元
    </text
    >
  </text>
</template>

<script setup>
import {getMoneyCentYuan} from "@/utils/tool";

const props = defineProps({
  money: {
    type: Number,
    default: 0,
  },
  bold: {
    type: Boolean,
    default: false,
  },
  moneySize: {
    type: String,
    default: "32rpx",
  },
  moneyUnitSize: {
    type: String,
    default: "24rpx",
  },
  color: {
    type: String,
    default: "var(danger-6)",
  },
  showNumberFont: {
    type: Boolean,
    default: false,
  },
  customStyle: {
    type: Object,
    default: () => ({}),
  },
  showUnit:{
    type:Boolean,
    default:false
  },
  showUnitIcon:{
    type:Boolean,
    default:false
  }

});
</script>

<style lang="scss" scoped></style>
